<template>
    <div>
        <!-- 轮播图 -->
        <div class="banns">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" height="100%">
                <van-swipe-item v-for="img,index in store.imgList" :key="img">
                    <img :src="img" alt="" class="imgs" v-lazy="img" @click="clickImg(index)">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 价格 -->
        <div class="prices">
            ￥{{ store.danData?.originprice }}
        </div>
        <!-- 标题 -->
        <div class="titles">
            {{ store.danData?.proname }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { useProductStore } from '@/store/product';
import { showImagePreview } from 'vant';

let store = useProductStore();

// 图片放大
const clickImg = (index:number)=>{
    showImagePreview({
    images: [
        ...store.imgList
    ],
    startPosition: index,
    closeable: true,
});


}
</script>

<style scoped>
.banns {
    height: 400px;
    width: 100%;
}

.banns .van-swipe {
    width: 100%;
    height: 400px;
}

.imgs {
    width: 100%;
    height: 100%;
}

.prices {
    color: red;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 600;
}

.titles {
    padding: 0 20px;
    margin-top: 15px;
    font-size: 16px;
    font-weight: 700;
}
</style>